<template>
	<div class='kline' style="height:400px; width:500px" ref='kline' id="kline"></div>
</template>

<script>
	import {
		onMounted,
		onUnmounted,
		ref,
		reactive
	} from 'vue'
	import HQChart from './umychart.uniapp.h5.js'
	import './umychart.resource/font/iconfont.css'
	HQChart.JSConsole.Chart.Log = () => {}
	HQChart.JSConsole.Complier.Log = () => {}

	function DefaultData() {}
	DefaultData.GetKLineOption = function() {
		let data = {
			Type: '历史K线图',

			Windows: //窗口指标
				[{
						Index: "MA",
						Modify: false,
						Change: false
					},
					{
						Index: "VOL",
						Modify: false,
						Change: false
					}
				],

			IsAutoUpdate: true,
			IsCorssOnlyDrawKLine: true,
			CorssCursorTouchEnd: true,
			IsClickShowCorssCursor: true,
			CorssCursorInfo: {
				Left: 2,
				Right: 2,
				Bottom: 1,
				IsShowCorss: true
			}, //十字光标刻度设置
			//IsFullDraw:true,

			Border: //边框
			{
				Left: 1,
				Right: 1, //右边间距
				Top: 25,
				Bottom: 25,
			},

			KLine: {
				DragMode: 1,
				Right: 1, //复权 0 不复权 1 前复权 2 后复权
				Period: 4, //周期: 0 日线 1 周线 2 月线 3 年线 
				PageSize: 6,
				IsShowTooltip: false,
				DrawType: 0,
				DataWidth: 10
			},

			KLineTitle: //K线标题栏设置
			{
				DateTimeSpace: 1,
				PeriodSpace: 1,
				NameSpace: 1,
			},

			ExtendChart: [{
					Name: 'KLineTooltip'
				}, //开启手机端tooltip
			],

			Frame: //子框架设置
				[{
						SplitCount: 3,
						Custom: [{
							Type: 0,
							Position: 'right'
						}]
					},
					{
						SplitCount: 2
					},
					{
						SplitCount: 3
					},
				],

		};

		return data;
	}

	DefaultData.GetMinuteOption = function() {
		var option = {
			Type: '分钟走势图', //创建图形类型

			Windows: //窗口指标
				[

				],

			IsAutoUpdate: true, //是自动更新数据
			DayCount: 1, //1 最新交易日数据 >1 多日走势图
			IsShowRightMenu: false, //是否显示右键菜单
			CorssCursorTouchEnd: true,
			IsClickShowCorssCursor: true,
			//IsFullDraw:true,

			MinuteLine: {
				//IsDrawAreaPrice:false,      //是否画价格面积图
			},

			Border: //边框
			{
				Left: 1, //左边间距
				Right: 1, //右边间距
				Top: 20,
				Bottom: 20
			},

			Frame: //子框架设置
				[{
						SplitCount: 3
					},
					{
						SplitCount: 2
					},
					{
						SplitCount: 3
					},
				],

			ExtendChart: //扩展图形
				[{
						Name: 'MinuteTooltip'
					} //手机端tooltip
				],
		};

		return option;
	}

	DefaultData.CreateGuid = function() {
		function S4() {
			return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
		}

		return "guid" + (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
	}

	var g_JSChart = new Map();

	export default {
		setup() {
			const kline = ref()
			const HQChartCtrl = reactive({
				Symbol: '600000.sh',
				ChartWidth: 350,
				ChartHeight: 450,
				KLineID: "HQChart_" + DefaultData.CreateGuid(),

				KLine: {
					Option: DefaultData.GetKLineOption(),
				},

				Minute: {
					Option: DefaultData.GetMinuteOption(),
				},

				ChartType: "KLine",
			})

			const SetSize = (width, height) => {
				console.log(width, height)
				HQChartCtrl.ChartWidth = width
				HQChartCtrl.ChartHeight = height
			}
			const GetJSChart = () => {
				if (g_JSChart.has(HQChartCtrl.KLineID)) return g_JSChart.get(HQChartCtrl.KLineID);
				return null;
			}
			const SetJSChart = (jsChart) => {
				console.log(jsChart)
				g_JSChart.set(HQChartCtrl.KLineID, jsChart)
				return null;
			}
			const ClearChart = () => {
				var jsChart = GetJSChart();
				if (jsChart) {
					jsChart.ChartDestory();
					SetJSChart(null);
				}
				var divKLine = document.getElementById(HQChartCtrl.KLineID);
				while (divKLine.hasChildNodes()) {
					divKLine.removeChild(divKLine.lastChild);
				}
			}
			const OnSize = () => {
				OnSize_h5()
			}
			const OnSize_h5 = () => {
				var chartHeight = HQChartCtrl.ChartHeight;
				var chartWidth = HQChartCtrl.ChartWidth;
				// var klines = kline.value;
				// klines.style.width = chartWidth + 'px';
				// klines.style.height = chartHeight + 'px';

				var jsChart = GetJSChart();
				if (jsChart) jsChart.OnSize();
			}
			const SetHQChartStyle = () => {
				SetHQChartStyle_h5()
			}
			const SetHQChartStyle_h5 = () => {
				var blackStyle = HQChart.HQChartStyle.GetStyleConfig(HQChart.STYLE_TYPE_ID.WHITE_ID);
				HQChart.JSChart.SetStyle(blackStyle);
			}
			const CreateHQChart = () => {
				SetHQChartStyle()
				if (HQChartCtrl.ChartType == "Minute") {
					CreateMinuteChart();
				} else {
					CreateKLineChart();
				}

			}
			const CreateKLineChart_h5 = () => {
				// ClearChart();
				var divKLine = document.getElementById('kline');
				var chart = HQChart.JSChart.Init(divKLine);
				HQChartCtrl.KLine.Option.Symbol = HQChartCtrl.Symbol;
				chart.SetOption(HQChartCtrl.KLine.Option);
				SetJSChart(chart);
				return chart;
			}
			const CreateKLineChart = () => {
				HQChartCtrl.ChartType = "KLine";
				CreateKLineChart_h5();
			}
			return {
				SetSize,
				GetJSChart,
				SetJSChart,
				ClearChart,
				OnSize,
				OnSize_h5,
				SetHQChartStyle,
				SetHQChartStyle_h5,
				CreateHQChart,
				CreateKLineChart_h5
			};

		}

	}
</script>

<style>
</style>